import {
  Text,
  View,
  RefreshControl,
  StatusBar,
  StyleSheet,
  ScrollView,
  SectionList,
  Dimensions,
} from 'react-native';
import React, {useState} from 'react';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

export default function Test() {
  const [refresh, setRefresh] = useState(false);

  const DATA = [
    {
      title: 'Main dishes',
      data: ['Pizza', 'Burger', 'Risotto'],
    },
    {
      title: 'Sides',
      data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
    },
    {
      title: 'Drinks',
      data: ['Water', 'Coke', 'Beer'],
    },
    {
      title: 'Desserts',
      data: ['Cheese Cake', 'Ice Cream'],
    },
  ];
  const onRefresh = () => {
    setRefresh(true);

    setTimeout(() => {
      setRefresh(false);
    }, 2000);
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <StatusBar backgroundColor="#ff8888" barStyle="default" />
        <SectionList
          refreshing={refresh}
          onRefresh={onRefresh}
          onEndReachedThreshold={0.1}
          onEndReached={() => {
            console.log('触底了');
          }}
          sections={DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({item}) => (
            <View style={styles.item}>
              <Text style={styles.title}>{item}</Text>
            </View>
          )}
          ListHeaderComponent={
            <View style={styles.center}>
              <Text style={styles.top}>头部</Text>
            </View>
          }
          ListFooterComponent={
            <View style={styles.center}>
              <Text style={styles.top}>底部</Text>
            </View>
          }
          ListEmptyComponent={
            <View>
              <Text>空数据</Text>
            </View>
          }
          renderSectionHeader={({section: {title}}) => (
            <Text style={styles.header}>{title}</Text>
          )}
        />
        {/* <ScrollView horizontal>
          <View style={styles.item}>
            <Text>211</Text>
          </View>
          <View style={styles.item}>
            <Text>211</Text>
          </View>
          <View style={styles.item}>
            <Text>211</Text>
          </View>
          <View style={styles.item}>
            <Text>211</Text>
          </View>
        </ScrollView>
        <ScrollView
          refreshControl={<RefreshControl />}
          // showsVerticalScrollIndicator={false}
        >
          <View>
            <Text>
              Pull down to see RefreshControl indicator Pull down to see
              RefreshControl indicator Pull down to see RefreshControl indicator
              Pull down to see RefreshControl indicator Pull down to see
              RefreshControl indicator Pull down to see RefreshControl indicator
              Pull down to see RefreshControl indicator Pull down to see
              RefreshControl indicatorPull down to see RefreshControl indicator
              Pull down to see RefreshControl indicatorPull down to see
              RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see RefreshControl indicator Pull down to see RefreshControl
              indicatorPull down to see RefreshControl indicator Pull down to
              see RefreshControl indicatorPull down to see RefreshControl
              indicator Pull down to see RefreshControl indicatorPull down to
              see Refres
            </Text>
          </View>
        </ScrollView> */}
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: 'lightgray',
  },
  box: {
    height: 200,
    backgroundColor: '#ff8888',
    alignItems: 'center',
  },
  // item: {
  //   width: Dimensions.get('window').width / 4,
  //   height: 100,
  //   justifyContent: 'center',
  //   alignItems: 'center',
  //   backgroundColor: 'lightblue',
  //   marginHorizontal: 10,
  // },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
  },
  center: {
    width: Dimensions.get('window').width,
  },
  top: {
    height: 50,
    textAlign: 'center',
    fontSize: 30,
  },
});
